<!--  -->
<template>
  <div>
    <el-button type="primary" @click="add" v-if="rows==null">保存</el-button>
    <el-button type="primary" @click="upd" v-if="rows!=null&&rows.approve_status==1">修改</el-button>
    <!-- <el-button type="primary" @click="lct">流程图</el-button> -->
    <!-- <el-button type="primary" @click="imp">导入</el-button> -->
    <el-divider></el-divider>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-header style="font-size: 20px;position: relative;left: -20px">
        基本信息
      </el-header>
      <div class="base">
          <div style="padding: 10px" class="grid-content bg-purple">
            <span>日期:
              <el-date-picker
                v-model="formInline.updateDate"
                type="date"
                placeholder="选择日期" readonly="" style="width:150px">
              </el-date-picker>
            </span>
          </div>
          <div style="padding: 10px" class="grid-content bg-purple">
            <span>日志编号:
              <el-input
                v-model="formInline.id" readonly=""
                style="width:150px">
              </el-input>
            </span>
          </div>
          <div style="padding: 10px" class="grid-content bg-purple">
            <span>项目名称:
              <el-input placeholder="请选择" style="width:150px" v-model="formInline.pname" @focus="getPid">
              </el-input>
            </span>
          </div>
          <div style="padding: 10px" class="grid-content bg-purple">
            <span>上午天气:
              <el-select v-model="formInline.forenoonWeather" clearable  placeholder="全部" style="width:150px">
                <el-option label="晴" value="晴"></el-option>
                <el-option label="阴" value="阴"></el-option>
                <el-option label="雨" value="雨"></el-option>
              </el-select>
            </span>
          </div>
          <div style="padding: 10px" class="grid-content bg-purple">
            <span>下午天气:
              <el-select v-model="formInline.afternoonWeather" clearable  placeholder="全部" style="width:150px">
                <el-option label="晴" value="晴"></el-option>
                <el-option label="阴" value="阴"></el-option>
                <el-option label="雨" value="雨"></el-option>
              </el-select>
            </span>
          </div>
          <div style="padding: 10px" class="grid-content bg-purple">
            <span>最低气温:
              <el-input placeholder="请输入" v-model="formInline.lowTemperature" style="width:150px">
              </el-input>
            </span>
          </div>
          <div style="padding: 10px" class="grid-content bg-purple">
            <span>最高气温:
              <el-input placeholder="请输入" v-model="formInline.highTemperature" style="width:150px">
              </el-input>
            </span>
          </div>
          <div style="padding: 10px" class="grid-content bg-purple">
            <span>填报人:
              <el-input placeholder="请选择" readonly v-model="formInline.fillUser" style="width:150px">
              </el-input>
            </span>
          </div>
          <div style="padding: 10px" class="grid-content bg-purple1">
            <span style="margin-left:40px">施工进展:
              <el-input placeholder="请输入" type="textarea" v-model="formInline.workProgress" style="width:300px">
              </el-input>
            </span>
          </div>
          <div style="padding: 10px" class="grid-content bg-purple1">
            <span style="margin-left:40px">施工主要工作:
              <el-input placeholder="请输入" type="textarea" v-model="formInline.mainWorks" style="width:300px" >
              </el-input>
            </span>
          </div> <br><br>
            <multi-file-upload
                style="width: 90%;margin-top: 30px"
                title="现场图片"
                action="http://localhost/uploads"
                :headers="{token: this.$store.state.token}"
                :show-button="checkRoute"
                @uploadSuccess="handleUploadSuccess1"
                :parent-file-list="Pictures"
        ></multi-file-upload>
          <multi-file-upload
                style="width: 90%;margin-top: 30px"
                title="附件"
                action="http://localhost/uploads"
                :headers="{token: this.$store.state.token}"
                :show-button="checkRoute"
                @uploadSuccess="handleUploadSuccess"
                :parent-file-list="fileList"
        ></multi-file-upload>
      </div>

      <div style="width: 90%;margin-top: 30px">
            <div style="width: 100%;">
                <div style="font-weight: 700;font-size: 20px;display: flex">
                    <div>施工明细</div>
                    <div style="margin-left: 30px">
                        <el-button size="mini" type="primary" @click="handleAddRow">增行</el-button>
                    </div>
                </div>
            </div>
            <el-divider></el-divider>
            <el-table :data="WorkLogDetails">
                <el-table-column label="施工班组" prop="org_name">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.org_name" @focus="handleOrg(scope)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="工作人数" prop="rs">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.rs" type="number"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="施工内容" prop="nr">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.nr"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="bz">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.bz"></el-input>
                    </template>
                </el-table-column>
                 <el-table-column label="操作" width="100px">
                    <template slot-scope="scope">
                        <el-button type="danger" @click="handleRemoveRow(scope)">删行</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            title="物料选择"
            :visible.sync="materialDialogVisible"
            width="70%">
        <el-table border="" ref="multipleTable" :data="tableData" 
        tooltip-effect="dark" style="width: 100%"  @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        >
            <el-table-column label="序号" type="index" width="120"> </el-table-column>
            <el-table-column prop="id" label="编号" width="120"> </el-table-column>
            <el-table-column prop="org_name" label="施工组名称"> </el-table-column>
            <el-table-column prop="org_dq" label="地区" width="120"> </el-table-column>
        </el-table>
    </el-dialog>
    <el-dialog
            title="项目名称"
            :visible.sync="dialogVisible"
            width="70%">
        <project-type-big-data v-on:row="row" v-if="dialogVisible" ></project-type-big-data>
    </el-dialog>
    </el-form>
  </div>
</template>

<script>
import {DateUtil} from "../../../model/common/DateUtil";
import ProjectTypeBigData from '../../common/projectInfo/ProjectInfoList'
import ConstructionLogListModel from '../../../model/nyx/ConstructionLogListModel'
import {AttachemenInfoService} from "../../../model/gs/AttachemenInfoService";
const attachemenInfoService = AttachemenInfoService.getInstance()
var cm=new ConstructionLogListModel();
export default {
  data () {
    return {
      formInline:{
        fillUser:sessionStorage.getItem('realName'),
        updateDate:DateUtil.today(),
        id:"",
        xmId:"",
        afternoonWeather:"",
        forenoonWeather:"",
        lowTemperature:"",
        highTemperature:"",
        workProgress:"",
        mainWorks:"",
      },
      WorkLogDetails:[],
      checkRoute:true,
      currentIndex: '',
      materialDialogVisible:false,
      tableData:[],
      dialogVisible:false,
      fileList:[],
      Pictures:[],
      rows:{},
    };
  },

  components: {ProjectTypeBigData},

  computed: {},

  mounted(){
    this.rows=this.$route.params.row
    if(this.rows!=null&&this.rows!=""){
      this.getFormInline()
      this.getFileList()
    }else{
      this.getId();
    }
    this.getOrgData()
    // if(this.rows!=null&&this.rows.approve_status!=1){
    //   this.checkRoute=false
    //   alert(this.checkRoute)
    // }
  },

  methods: {
    getId(){
      cm.getId().then(response=>{
        this.formInline.id=response.data.message
      })
    },
    add(){
      cm.save(this.formInline,this.WorkLogDetails).then(response=>{
        console.log(response)
        this.$router.push("/ConstructionLogList")
      })
    },
    tjsp(){

    },
    lct(){

    },
    imp(){

    },
    handleAddRow() {
      this.WorkLogDetails.push({
          org_name: "",
          rs: "",
          nr: '',
          bz: '',
      })
    },
    handleUploadSuccess(ids){
        this.formInline.attachIds=ids
      console.log(this.formInline)
    },
    handleUploadSuccess1(ids){
      console.log(ids)
      this.formInline.scenePicture=ids
      console.log(this.formInline)
    },
    handleRemoveRow(row) {
        this.WorkLogDetails.splice(row.$index, 1)
    },
    submitUpload(){
        this.$refs.upload.submit();
    },
    handleOrg(row){
      this.currentIndex=row.$index
      this.materialDialogVisible=true
    },
    handleSetOrg(row){
      console.log(row)
    },
    handleRowClick(row){
      this.WorkLogDetails[this.currentIndex].org_name=row.org_name;
       this.WorkLogDetails[this.currentIndex].org=row.id;
       this.materialDialogVisible=false
    },
    getOrgData(){
        cm.getOrgData().then((response)=>{
          this.tableData=response.data.data
        })
    },
    handleSelectionChange(){

    },
    getPid(){
        this.dialogVisible=true
    },
    row(row){
        this.dialogVisible=false
        this.formInline.pname=row.projectName
        this.formInline.xmId=row.id
    },
    getFormInline(){
      this.formInline.pname=this.rows.project_name
      this.formInline.id=this.rows.id
      this.formInline.updateDate=this.rows.update_date
      this.formInline.xmId=this.rows.xmId
      this.formInline.mainWorks=this.rows.main_works
      this.formInline.fillUser=this.rows.user_realname
      this.formInline.workProgress=this.rows.work_progress
      this.formInline.afternoonWeather=this.rows.afternoon_weather
      this.formInline.forenoonWeather=this.rows.forenoon_weather
      this.formInline.highTemperature=this.rows.high_temperature
      this.formInline.lowTemperature=this.rows.low_temperature 
      cm.getMx(this.formInline.id).then(response=>{
        this.WorkLogDetails=response.data.data
      })
    },
    getFileList() {
      if(this.rows.attach_ids!=undefined){
        attachemenInfoService.getById(this.rows.attach_ids).then(response => {
          if (response.data.code === 0) {
              response.data.data.forEach(item => {
                this.fileList.push({
                    fileName: item.fileName,
                    uploadPerson: this.rows.user_realname,
                    uploadDate: item.uploadDate,
                    filePath: item.filePath
                })
              })
            }
        })
      }
      if(this.rows.scene_picture!=undefined){
        attachemenInfoService.getById(this.rows.scene_picture).then(response => {
          if (response.data.code === 0) {
              response.data.data.forEach(item => {
                  this.Pictures.push({
                      fileName: item.fileName,
                      uploadPerson: this.rows.user_realname,
                      uploadDate: item.uploadDate,
                      filePath: item.filePath
                  })
              })
            }
        })
      }
   },
   upd(){
     cm.update(this.formInline,this.WorkLogDetails).then(response=>{
        console.log(response)
        this.$router.push("/ConstructionLogList")
      })
   }
  }
}

</script>
<style scoped>
.base,.details{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.bg-purple {
    background: #FFFFFF;
    border: 1px solid  darkgray;
    width: 21%;
    height: 50px;
    margin-top: -1px;
    margin-left: -1px;
}
.base .bg-purple{
  text-align: right;
}
.bg-purple1 {
    background: #FFFFFF;
    border: 1px solid  darkgray;
    width: 43.75%;
    line-height: 50px;
    text-align: left;
    margin-top: -1px;
    margin-left: -1px;
}
</style>